/* 智能停车样式文件 */
/* 将common.less的文件引入首页 @import"文件名" */
@import "common";
* {
    touch-action: pan-y;
}
/* 页面元素rem 计算公式：元素  / html字体大小(50) */
@basefont:50;
/* 身体 */
.body_part {
    //background-color: pink;
    margin-top: (23rem / @basefont);
    /* 预约时间部分 */
    .time_part {
        #time {
            color: rgba(51,51,51,1);
            font-size: 0.65rem;
            &::before {
                content: '\e930';
                font-family: 'icomoon';
                color: rgb(172, 172, 172);
                font-weight: 400;
                font-size: 0.65rem;
            }
            &::after {
                content: '\e930';
                font-family: 'icomoon';
                color: rgb(172, 172, 172);
                font-size: 0.65rem;
                font-weight: 400;
            }
        }
        .time_part_body {
            height: (215rem / @basefont);
            width: 100%;
            padding: (36rem / @basefont);
            color: rgb(204, 204, 204);
            font-size: 0.7rem;
            text-align: center;
            background-color: white;
            .thetime {
                margin-top: (16.8rem / @basefont);
                width: 100%;
                height: (72rem / @basefont);
                //background-color: purple;
                div[class^='thetime_'] {
                    //position: relative;
                    width: (124.8rem / @basefont);
                    height: 100%;
                    text-align: center;
                    line-height: (72rem / @basefont);
                    vertical-align: bottom;
                    //background-color: rgb(38, 47, 51);
                    div {
                        float: left;
                        padding: (4.8rem / @basefont) (7.2rem / @basefont);
                        height: 100%;
                        width: (76.8rem / @basefont);
                        background-color: rgb(242, 242, 242);
                        font-weight: bold;
                        font-size: 1rem;
                    }
                    span {
                        display: inline-block;
                        height: 100%;
                        width: (124.8rem / @basefont) - (76.8rem / @basefont);
                        font-size: 0.5rem;
                        
                    }
                }
                
            }
        }
    }
    /* 预约按钮 */
    .booking_button {
        margin-bottom: (23rem / @basefont);
        height: (135rem / @basefont);
        width: 100%;
        //background-color: skyblue;
        button[class^='button_'] {
            height: (93.65rem / @basefont);
            width: (282.975rem / @basefont);
            font-size: 0.7rem;
            background-color: unset;
            border: (1rem / @basefont) solid rgb(50, 133, 255);
            border-radius: (93.65rem / @basefont / 2);
            color: rgb(50, 133, 255);
        }
        .button_cancenl {
            margin-right: (30rem / @basefont);
        }
        .button_change {
            margin-left: (30rem / @basefont);
        }
        /* 占用按钮 */
        .button_booked {
            background-color: white!important;
        }
    }
    /* 消费记录部分 */
    .expense_calendar {
        margin-top: (23rem / @basefont);
        -webkit-box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
        /* 中间列表 */
        .expense_calendar_list {
            width: 100%;
            background-color: white;
            li {
                height: (95rem / @basefont);
                width: 100%;
                border-bottom: 0.04313rem rgba(243,243,243,1) solid;
                .expense_calendar_list_part {
                    position: relative;
                    display: block;
                    height: 100%;
                    width: 100%;
                    //background-color: plum;
                    line-height: (92rem / @basefont);
                    //text-align: center;
                    i {
                        position: absolute;
                        top: 50%;
                        left: (62.4rem / @basefont);
                        transform: translateY(-50%);
                        color: #666;
                        font-size: 0.5rem;
                        font-family: 'icomoon';
                    }
                    .title {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        margin-left: (110rem / @basefont);
                        color: #333;
                        font-size: .7rem;
                    }
                    .see {
                        position: absolute;
                        right: (80rem / @basefont / 2);
                        transform: translateX(50%);
                        font-family: 'icomoon';
                        color: #666;
                        font-size: 0.8rem;
                    }
                }
            }
        }
    }
}